import React, { useState } from 'react';
import { Skeleton, Button, Tooltip, Typography, message } from 'antd';
import { CalendarOutlined, BarChartOutlined, SyncOutlined, CheckCircleOutlined } from '@ant-design/icons';
import { AccountInfo } from '../../types/account';
import './AccountPoolCard.css';

const { Text, Title } = Typography;

interface AccountPoolCardProps {
    accountInfo: AccountInfo | null;
    loading: boolean;
    onRefresh: () => void;
}

export const AccountPoolCard: React.FC<AccountPoolCardProps> = ({ accountInfo, loading, onRefresh }) => {
    const [isInjecting, setIsInjecting] = useState(false);

    if (loading) {
        return (
            <div className="account-pool-card">
                <Skeleton active paragraph={{ rows: 3, width: ['60%', '100%', '80%'] }} title={false} />
            </div>
        );
    }

    if (!accountInfo) {
        return null; // Or some placeholder for "no account"
    }
    
    const { email, membership_type, trial_days_remaining, requestUsage, maxRequestUsage, token } = accountInfo;

    const handleInject = async () => {
        if (!email || !token) {
            message.error('账号信息不完整，无法注入。');
            return;
        }
        setIsInjecting(true);
        try {
            const result = await window.electronAPI.runTask<{ success: boolean; message: string }>('account:inject', { email, token });
            if (result.success) {
                message.success(result.message);
            } else {
                message.error(result.message);
            }
        } catch (error: unknown) {
            const errorMessage = error instanceof Error ? error.message : String(error);
            message.error(`注入时发生未知错误: ${errorMessage}`);
        } finally {
            setIsInjecting(false);
        }
    };

    const displayEmail = email.split('@')[0] + '@*';

    const getDisplayMembershipType = (type: string) => {
        switch (type) {
            case 'FREE':
                return '免费版';
            case 'FREE_TRIAL':
                return '试用版';
            default:
                return type;
        }
    };
    const displayMembershipType = getDisplayMembershipType(membership_type);

    return (
        <div className="account-pool-card">
            <div className="account-header">
                <Title level={5} style={{ margin: 0, color: '#fff' }}>
                    {displayEmail}
                </Title>
                <div className="header-actions">
                    <Tooltip title="刷新" placement="top">
                        <Button 
                            type="text" 
                            shape="circle"
                            icon={<SyncOutlined spin={loading} />} 
                            onClick={onRefresh} 
                        />
                    </Tooltip>
                    <Tooltip title="注入" placement="top">
                        <Button 
                            type="text" 
                            shape="circle"
                            icon={<CheckCircleOutlined spin={isInjecting} />}
                            onClick={handleInject}
                            loading={isInjecting}
                        />
                    </Tooltip>
                </div>
            </div>
            <Text type="secondary" style={{ display: 'flex', alignItems: 'center', gap: '6px', marginBottom: '10px' }}>
                {displayMembershipType}
            </Text>
            
            <div className="account-metrics">
                <div className="metric-item">
                    <Text type="secondary" className="metric-label"><BarChartOutlined /> 用量</Text>
                    <div className="metric-value">
                        <span className="used-count">{requestUsage}</span>
                        <span className="total-count">/ {maxRequestUsage}</span>
                    </div>
                </div>
                <div className="metric-item">
                    <Text type="secondary" className="metric-label"><CalendarOutlined /> 试用到期</Text>
                    <div className="metric-value">
                        <span className="used-count">{trial_days_remaining}</span>
                        <span className="total-count">天</span>
                    </div>
                </div>
            </div>
        </div>
    );
}; 